<template>
<view>
<map id="map" scale="3" :longitude="longitude2" :latitude="latitude2" :markers="markers2" :include-points="markers2" @markertap="markertap" show-location style="width: 100%; height: 580px;" enable-scroll="true" enable-zoom="true"></map>
</view>
</template>

<script>

export default {
  data() {
    return {
      latitude: 35.95995,
      longitude: 120.19653,
      markers: [],
      polyline: [{
        points: [{
          longitude: 120.19653,
          latitude: 35.95995
        }, {
          longitude: 120.19653,
          latitude: 35.95995
        }],
        color: "#FF0000DD",
        width: 2,
        dottedLine: true
      }],
      controls: [{
        id: 1,
        iconPath: "/static/static/images/location-control.png",
        position: {
          left: 0,
          top: 10,
          width: 40,
          height: 40
        },
        clickable: true
      }],
      latitude2: 24.4795100000,
      longitude2: 118.0894800000,
      markers2: [{
        id: 0,
        latitude: 24.4455700000,
        longitude: 118.0824000000,
        // alpha:0,
        callout: {
          content: " 厦门思明区政府 \n 12000元/㎡",
          padding: 10,
          display: 'ALWAYS',
          textAlign: 'center' // borderRadius: 10,
          // borderColor:'#ff0000',
          // borderWidth: 2,

        }
      }, {
        id: 1,
        latitude: 24.5131500000,
        longitude: 118.1468600000,
        callout: {
          content: " 厦门湖里区政府 \n 70000元/㎡",
          padding: 10,
          display: 'ALWAYS',
          textAlign: 'center'
        }
      }, {
        id: 2,
        latitude: 24.7235700000,
        longitude: 118.1517300000,
        callout: {
          content: " 厦门市同安区政府 \n 100",
          padding: 10,
          display: 'ALWAYS',
          textAlign: 'center'
        }
      }, {
        id: 3,
        latitude: 24.5759000000,
        longitude: 118.0972700000,
        callout: {
          content: " 厦门市集美区政府 \n 100",
          padding: 10,
          display: 'ALWAYS',
          textAlign: 'center'
        }
      }, {
        id: 4,
        latitude: 24.4846000000,
        longitude: 118.0329300000,
        callout: {
          content: " 厦门市海沧区政府 \n 100",
          padding: 10,
          display: 'ALWAYS',
          textAlign: 'center'
        }
      }, {
        id: 5,
        latitude: 24.6196000000,
        longitude: 118.2478900000,
        callout: {
          content: " 厦门市翔安区政府 \n 100",
          padding: 10,
          display: 'ALWAYS',
          textAlign: 'center'
        }
      }],
      centerX: "",
      centerY: ""
    };
  },

  components: {},
  props: {},
  onReady: function (e) {
    // 使用 wx.createMapContext 获取 map 上下文 
    this.mapCtx = uni.createMapContext('myMap');
  },
  onshow: function (){
  },
  onLoad: function () {
    console.log('地图定位！');
    let that = this;
    uni.getLocation({
      type: 'gcj02',
      //返回可以用于wx.openLocation的经纬度
      success: res => {
        console.log(res);
        let latitude = res.latitude;
        let longitude = res.longitude;
        console.log("map location == " + JSON.stringify(res));
        let marker = this.createMarker(res);
        this.markers.push(marker);
        this.setData({
          centerX: longitude,
          centerY: latitude // markers:this.getSchoolMarkers()
          // markers:marker

        });
      }
    });
  },
  methods: {
    regionchange(e) {
      console.log(e.type);
    },

    markertap(e) {
      console.log(e);
      console.log(e);
      var id = e.markerId;
      console.log(id); // wx.openLocation({
      //   latitude: this.data.markers[id].latitude,
      //   longitude: this.data.markers[id].longitude,
      // })

      uni.navigateTo({
        url: '/pages/index/index',
        success: function (res) {},
        fail: function (res) {},
        complete: function (res) {}
      });
    },

    controltap(e) {
      console.log(e.controlId);
      this.moveToLocation();
    },

    getSchoolMarkers() {
      let markers = []; // for(let item of schoolData){
      //   let marker=this.createMarker(item);
      //   markers.push(marker)
      // }

      return markers;
    },

    moveToLocation: function () {
      this.mapCtx.moveToLocation();
    },

    createMarker(point) {
      let latitude = point.latitude;
      let longitude = point.longitude;
      let marker = {
        iconPath: "/static/static/image/location.png",
        id: point.id || 0,
        name: point.name || '11111',
        latitude: latitude,
        longitude: longitude,
        width: 25,
        height: 48
      };
      return marker;
    }

  }
};
</script>
<style>
/* pages/map/map.wxss */
</style>